<div *ngIf="builder$ | async as builder; else loading">
  <form class="form-horizontal" (submit)="deployStream()" [formGroup]="builder.formGroup" clrForm>
    <div>
      <div class="tab-pane">
        <app-stream-deploy-builder-errors [errors]="builder.errors" (removeError)="removeError($event)">
        </app-stream-deploy-builder-errors>
        <div class="builder">
          <div class="col-fixed col-key">
            <!-- 0 -->
            <div class="line-head"></div>

            <!-- 1 -->
            <div class="line-toggle">
              <a class="toggle" (click)="state.platform = !state.platform">
                <clr-icon shape="angle" [class.active]="state.platform"></clr-icon>
                Platform
              </a>
            </div>

            <!-- 2 -->
            <div class="line-body" *ngIf="state.platform">
              <div class="status" *ngIf="builder.formGroup.get('platform').invalid">
                <clr-tooltip>
                  <clr-icon clrTooltipTrigger shape="clr-validate-icon" size="24"></clr-icon>
                  <clr-tooltip-content clrPosition="top-right" clrSize="md" *clrIfOpen>
                    <span>The define platform is not valid (unknown).</span>
                  </clr-tooltip-content>
                </clr-tooltip>
              </div>
              <div class="form-control form-control-label">Platform</div>
            </div>

            <!-- 3 -->
            <div class="line-toggle">
              <a class="toggle" (click)="state.deployer = !state.deployer">
                <clr-icon shape="angle" [class.active]="state.deployer"></clr-icon>
                Generic Deployer Properties
              </a>
            </div>

            <!-- 4 -->
            <div *ngIf="state.deployer">
              <div class="line-body" *ngFor="let deployer of builder.streamDeployConfig.deployers; let i = index">
                <div class="status" *ngIf="builder.formGroup.get('deployers').controls[i].invalid">
                  <clr-tooltip>
                    <clr-icon clrTooltipTrigger shape="clr-validate-icon" size="24"></clr-icon>
                    <clr-tooltip-content clrPosition="top-right" clrSize="md" *clrIfOpen>
                      <div
                        [innerHtml]="
                          tooltip(builder.streamDeployConfig, builder.formGroup.get('deployers').controls[i])
                        "
                      ></div>
                    </clr-tooltip-content>
                  </clr-tooltip>
                </div>

                <div class="form-control form-control-label">
                  {{ deployer.name }}
                </div>
              </div>
            </div>

            <!-- 5 -->
            <div class="line-toggle">
              <div class="help">
                <clr-tooltip>
                  <clr-icon clrTooltipTrigger shape="clr-validate-icon" size="24"></clr-icon>
                  <clr-tooltip-content clrPosition="top-right" clrSize="lg" *clrIfOpen>
                    <div>
                      <div><strong>Example:</strong></div>
                      <div>Key: <strong>cloudfoundry.services</strong></div>
                      <div>Value (application <strong>jdbc</strong>): <strong>mysqlcups</strong></div>
                      <div>Generated property: <strong>deployer.jdbc.cloudfoundry.services=mysqlcups</strong></div>
                    </div>
                  </clr-tooltip-content>
                </clr-tooltip>
              </div>

              <a class="toggle" (click)="state.specificPlatform = !state.specificPlatform">
                <clr-icon shape="angle" [class.active]="state.specificPlatform"></clr-icon>
                Deployment Platform
              </a>
            </div>

            <!-- 6 -->
            <div *ngIf="state.specificPlatform">
              <div *ngIf="builder.builderDeploymentProperties.global.length > 0" class="line-body">
                <div class="form-control form-control-label">Properties</div>
              </div>
            </div>
            <div *ngIf="state.specificPlatform" formArrayName="specificPlatform">
              <div
                class="line-body"
                *ngFor="let f of builder.formGroup.get('specificPlatform').controls; let i = index"
                [formGroupName]="i"
                [class.has-error]="builder.formGroup.get('specificPlatform').controls[i].get('property').invalid"
              >
                <div class="status" *ngIf="builder.formGroup.get('specificPlatform').controls[i].invalid">
                  <clr-tooltip>
                    <clr-icon clrTooltipTrigger shape="clr-validate-icon" size="24"></clr-icon>
                    <clr-tooltip-content clrPosition="top-right" clrSize="md" *clrIfOpen>
                      <div
                        [innerHtml]="
                          tooltip(builder.streamDeployConfig, builder.formGroup.get('specificPlatform').controls[i])
                        "
                      ></div>
                    </clr-tooltip-content>
                  </clr-tooltip>
                </div>

                <input
                  tabindex="{{ 50 + i }}"
                  placeholder="Enter a value"
                  class="clr-input"
                  formControlName="property"
                  type="text"
                />
              </div>
            </div>

            <!-- 7 -->
            <div class="line-toggle">
              <a class="toggle" (click)="state.app = !state.app">
                <clr-icon shape="angle" [class.active]="state.app"></clr-icon>
                Applications Properties
              </a>
            </div>

            <!-- 8 -->
            <div *ngIf="state.app">
              <div class="line-body">
                <div class="status" *ngIf="builder.formGroup.get('appsVersion').invalid">
                  <clr-tooltip>
                    <clr-icon clrTooltipTrigger shape="clr-validate-icon" size="24"></clr-icon>
                    <clr-tooltip-content clrPosition="top-right" clrSize="md" *clrIfOpen>
                      <div
                        [innerHtml]="tooltip(builder.streamDeployConfig, builder.formGroup.get('appsVersion'))"
                      ></div>
                    </clr-tooltip-content>
                  </clr-tooltip>
                </div>

                <div class="form-control form-control-label">Version</div>
              </div>
              <div class="line-body">
                <div class="form-control form-control-label">Properties</div>
              </div>
              <div formArrayName="global">
                <div
                  class="line-body"
                  *ngFor="let f of builder.formGroup.get('global').controls; let i = index"
                  [formGroupName]="i"
                  [class.has-error]="builder.formGroup.get('global').controls[i].get('property').invalid"
                >
                  <div class="status" *ngIf="builder.formGroup.get('global').controls[i].invalid">
                    <clr-tooltip>
                      <clr-icon clrTooltipTrigger shape="clr-validate-icon" size="24"></clr-icon>
                      <clr-tooltip-content clrPosition="top-right" clrSize="md" *clrIfOpen>
                        <div
                          [innerHtml]="tooltip(builder.streamDeployConfig, builder.formGroup.get('global').controls[i])"
                        ></div>
                      </clr-tooltip-content>
                    </clr-tooltip>
                  </div>

                  <input
                    tabindex="{{ 102 + i }}"
                    placeholder="Enter a value"
                    class="clr-input"
                    formControlName="property"
                    type="text"
                  />
                </div>
              </div>
            </div>
          </div>

          <div class="col-fixed global">
            <!-- 0 -->
            <div class="line-head">Global</div>

            <!-- 1 -->
            <div class="line-toggle"></div>

            <!-- 2 -->
            <div
              class="line-body"
              *ngIf="state.platform"
              [class.has-error]="
                isErrorPlatform(builder.streamDeployConfig.platform.values, builder.formGroup.get('platform').value)
              "
            >
              <div class="clr-select-wrapper">
                <select tabindex="1" formControlName="platform" class="clr-select">
                  <option value="">Select a value</option>
                  <option *ngFor="let platform of builder.streamDeployConfig.platform.values" [value]="platform.key">
                    {{ platform.name }}
                    ({{ platform.type }})
                  </option>
                  <option
                    *ngIf="
                      isInvalidPlatform(
                        builder.streamDeployConfig.platform.values,
                        builder.formGroup.get('platform').value
                      )
                    "
                    [value]="builder.formGroup.get('platform').value"
                  >
                    {{ builder.formGroup.get('platform').value }} (invalid)
                  </option>
                </select>
              </div>
            </div>

            <!-- 3 -->
            <div class="line-toggle"></div>

            <!-- 4 -->
            <div formArrayName="deployers" *ngIf="state.deployer">
              <div
                [formGroupName]="i"
                class="line-body"
                *ngFor="let deployer of builder.streamDeployConfig.deployers; let i = index"
                [class.has-error]="builder.formGroup.get('deployers').controls[i].get('global').invalid"
              >
                <input
                  tabindex="{{ 2 + i }}"
                  placeholder="Enter a number"
                  formControlName="global"
                  class="clr-input"
                  [class.form-control-number]="deployer.suffix"
                  type="text"
                />
                <span class="placeholder-unit">{{ deployer.suffix }}</span>
              </div>
            </div>

            <!-- 5 -->
            <div class="line-toggle"></div>

            <div
              class="line-body"
              *ngIf="state.specificPlatform && builder.builderDeploymentProperties.global.length > 0"
            >
              <div class="form-control form-control-label">
                <strong>{{ getDeploymentProperties(builder.builderDeploymentProperties).length }}</strong>
                <span> /</span> {{ builder.builderDeploymentProperties.global.length }} properties
                <button
                  tabindex="{{ 101 }}"
                  type="button"
                  (click)="openDeploymentProperties(builder)"
                  class="btn btn-sm btn-secondary"
                >
                  Edit
                </button>
              </div>
            </div>

            <!-- 6 -->
            <div *ngIf="state.specificPlatform" formArrayName="specificPlatform">
              <div
                class="line-body"
                *ngFor="let f of builder.formGroup.get('specificPlatform').controls; let i = index"
                [formGroupName]="i"
                [class.has-error]="builder.formGroup.get('specificPlatform').controls[i].get('global').invalid"
              >
                <input
                  tabindex="{{ 50 + i }}"
                  placeholder="Enter a value"
                  class="clr-input"
                  formControlName="global"
                  type="text"
                />
              </div>
            </div>

            <!-- 7 -->
            <div class="line-toggle"></div>

            <!-- 8 -->
            <div *ngIf="state.app">
              <div class="line-body"></div>
              <div class="line-body"></div>
              <div formArrayName="global">
                <div
                  class="line-body"
                  *ngFor="let f of builder.formGroup.get('global').controls; let i = index"
                  [formGroupName]="i"
                  [class.has-error]="builder.formGroup.get('global').controls[i].get('global').invalid"
                >
                  <input
                    tabindex="{{ 102 + i }}"
                    placeholder="Enter a value"
                    class="clr-input"
                    formControlName="global"
                    type="text"
                  />
                </div>
              </div>
            </div>
          </div>

          <div class="scroll">
            <div class="col" *ngFor="let app of builder.streamDeployConfig.apps">
              <!-- 0 -->
              <div class="line-head">
                <strong>{{ app.name }}</strong>
                <br />
                <span class="label label-app {{ app.type }}">{{ app.origin }}</span>
                <!--                TODO-->
                <!--                <app-type [application]="app"></app-type>-->
              </div>

              <!-- 1 -->
              <div class="line-toggle"></div>

              <!-- 2 -->
              <div class="line-body" *ngIf="state.platform"></div>

              <!-- 3 -->
              <div class="line-toggle"></div>

              <!-- 4 -->
              <div formArrayName="deployers" *ngIf="state.deployer">
                <div
                  [formGroupName]="i"
                  class="line-body"
                  *ngFor="let deployer of builder.streamDeployConfig.deployers; let i = index"
                  [class.has-error]="builder.formGroup.get('deployers').controls[i].get(app.name).invalid"
                >
                  <input
                    tabindex="{{ 2 + i }}"
                    placeholder="Enter a number"
                    [formControlName]="app.name"
                    class="clr-input"
                    [class.form-control-number]="deployer.suffix"
                    type="text"
                  />
                  <span class="placeholder-unit">{{ deployer.suffix }}</span>
                </div>
              </div>

              <!-- 5 -->
              <div class="line-toggle"></div>

              <!-- 6 -->
              <!-- track visibility from global as those are same as per apps -->
              <div
                class="line-body"
                *ngIf="state.specificPlatform && builder.builderDeploymentProperties.global.length > 0"
              >
                <div class="form-control form-control-label">
                  <strong>{{ getDeploymentProperties(builder.builderDeploymentProperties, app.name).length }}</strong>
                  <span> /</span> {{ builder.builderDeploymentProperties.apps[app.name].length }} properties
                  <button
                    tabindex="{{ 101 }}"
                    type="button"
                    (click)="openDeploymentProperties(builder, app.name)"
                    class="btn btn-sm btn-secondary"
                  >
                    Edit
                  </button>
                </div>
              </div>

              <div *ngIf="state.specificPlatform" formArrayName="specificPlatform">
                <div
                  class="line-body"
                  *ngFor="let f of builder.formGroup.get('specificPlatform').controls; let i = index"
                  [formGroupName]="i"
                  [class.has-error]="builder.formGroup.get('specificPlatform').controls[i].get(app.name).invalid"
                >
                  <input
                    tabindex="{{ 50 + i }}"
                    placeholder="Enter a value"
                    class="clr-input"
                    [formControlName]="app.name"
                    type="text"
                  />
                </div>
              </div>

              <!-- 7 -->
              <div class="line-toggle"></div>

              <!-- 8 -->
              <div *ngIf="state.app">
                <div class="line-body" [class.has-error]="app.optionsState.isInvalid">
                  <div formGroupName="appsVersion">
                    <div class="cell">
                      <div class="clr-select-wrapper">
                        <select tabindex="{{ 100 }}" [formControlName]="app.name" class="clr-select">
                          <option value="">Default version ({{ app.version }})</option>
                          <option *ngFor="let version of app.versions" [value]="version.version">
                            {{ version.version }}
                          </option>
                          <option
                            *ngIf="app.optionsState.isInvalid"
                            [value]="builder.formGroup.get('appsVersion').get(app.name).value"
                          >
                            {{ builder.formGroup.get('appsVersion').get(app.name).value }} (invalid)
                          </option>
                        </select>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="line-body" [class.has-error]="app.optionsState.isInvalid">
                  <div
                    *ngIf="
                      app.options &&
                      !app.optionsState.isLoading &&
                      !app.optionsState.isOnError &&
                      !app.optionsState.isInvalid
                    "
                    class="form-control form-control-label"
                  >
                    <div *ngIf="app.options.length > 0">
                      <strong>{{ getAppProperties(builder.builderAppsProperties, app.name).length }}</strong>
                      <span> /</span> {{ app.options.length }} properties
                      <button
                        tabindex="{{ 101 }}"
                        type="button"
                        (click)="openApp(builder, app)"
                        class="btn btn-sm btn-secondary"
                      >
                        Edit
                      </button>
                    </div>
                    <div *ngIf="app.options.length === 0">
                      <strong>No properties</strong>
                    </div>
                  </div>
                  <div *ngIf="app.optionsState.isLoading" class="form-control form-control-label">Loading ...</div>
                  <div *ngIf="app.optionsState.isOnError" class="form-control form-control-label">Error loading</div>
                  <div *ngIf="app.optionsState.isInvalid" class="form-control form-control-label">Invalid version</div>
                </div>
                <div formArrayName="global">
                  <div
                    class="line-body"
                    *ngFor="let f of builder.formGroup.get('global').controls; let i = index"
                    [formGroupName]="i"
                    [class.has-error]="builder.formGroup.get('global').controls[i].get(app.name).invalid"
                  >
                    <input
                      tabindex="{{ 102 + i }}"
                      placeholder="Enter a value"
                      class="clr-input"
                      [formControlName]="app.name"
                      type="text"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="btn-group builder-actions-1">
          <button tabindex="200" id="btn-export" type="button" class="btn btn-sm btn-secondary" (click)="exportProps()">
            Export
          </button>
          <button
            tabindex="200"
            id="btn-copy"
            type="button"
            class="btn btn-sm btn-secondary"
            (click)="copyToClipboard()"
          >
            Copy to Clipboard
          </button>
        </div>
        <div>
          <a tabindex="200" id="btn-cancel" class="btn btn-default" routerLink="/streams/list">Cancel</a>
          <button tabindex="200" id="btn-deploy-builder" type="submit" class="btn btn-primary">
            <span *ngIf="!isDeployed">Deploy stream</span>
            <span *ngIf="isDeployed">Update stream</span>
          </button>
        </div>
      </div>
    </div>
  </form>
</div>

<app-properties-dialog-content #appPropertiesModal></app-properties-dialog-content>
<app-properties-groups-dialog-content #groupsPropertiesModal></app-properties-groups-dialog-content>

<ng-template #loading>
  <div style="padding: 1rem">
    <clr-spinner clrInline clrSmall></clr-spinner>
    Loading...
  </div>
</ng-template>
